<template>
<div class="layout">
	
	<Row>
		<Col :span="24">
			<Breadcrumb>
				<BreadcrumbItem to="/" @click.native="changeMenu(0)"><Icon type="home"></Icon> 首页</BreadcrumbItem>
				<BreadcrumbItem :to="{'name':'cms-comment-index'}" >文章评论列表</BreadcrumbItem>
				<BreadcrumbItem>{{title}}</BreadcrumbItem>
			</Breadcrumb>
			<div class="cleaner10"></div>
		</Col>
	</Row>

	<Form ref="vform" :model="vform" :label-width="80">
		<Row type="flex" :gutter="16">
			<Col :span=17>
				
				<FormItem label="文章标题">
					<Input readonly v-model="vform.title" placeholder="请填写文章标题"></Input>
				</FormItem>
				<FormItem label="用户名称">
					<Input readonly v-model="vform.uname" placeholder="请填写用户名称"></Input>
				</FormItem>
				<FormItem label="状态">
					<Tag :color="getStatusColor(vform.status)">{{statusList[vform.status]}}</Tag>
				</FormItem>
				<FormItem label="备注">
					<Input v-model="vform.memo" placeholder="请填写备注"></Input>
				</FormItem>
				<FormItem label="评论内容">
					<quill-editor ref="quill1" v-model="vform.content" :options="editorOption"></quill-editor>
				</FormItem>
			</Col>
			<Col :span=7>
				<Card >
					<p slot="title">
						<Icon type="ios-film-outline"></Icon>
						控制菜单
					</p>
					<div>

					<FormItem label="点赞数">
						<InputNumber :max="99999" :min="0" :step="1" v-model="vform.like"></InputNumber>
					</FormItem>
					<FormItem label="点赞基数">
						<InputNumber :max="99999" :min="0" :step="1" v-model="vform.like_base"></InputNumber>&nbsp;&nbsp;
					</FormItem>
					<FormItem label="吐槽数">
						<InputNumber :max="99999" :min="0" :step="1" v-model="vform.unlike"></InputNumber>&nbsp;&nbsp;
					</FormItem>
					<FormItem label="回复数">
						<InputNumber :max="99999" :min="0" :step="1" v-model="vform.reply"></InputNumber>&nbsp;&nbsp;
					</FormItem>
					<FormItem label="权重">
						<InputNumber :max="99999" :min="0" :step="1" v-model="vform.sequence"></InputNumber>&nbsp;&nbsp;
					</FormItem>
					
						<Button type="success" @click="save">保存</Button>
						<Button type="primary" @click="changeStatus($route.params.id,1)" v-if="0==vform.status || 2==vform.status">审核</Button>
						<Button type="warning" @click="changeStatus($route.params.id,2)" v-if="1==vform.status">取消审核</Button>
						<Button type="error" ghost @click="deleteComment($route.params.id,3)" >删除</Button>
			


					</div>
				</Card>
			</Col>
		</Row>
	</Form>



</div>
</template>
<script>
// 引入子组件
import hljs from 'highlight.js'
import 'highlight.js/styles/vs2015.css'

// quill编辑器的字体
var fonts = ['SimSun', 'Microsoft-YaHei','Arial','Times-New-Roman','sans-serif'];  
var Font = Quill.import('formats/font'); 
Font.whitelist = fonts; //将字体加入到白名单 
Quill.register(Font, true);

import {mapState,mapGetters} from 'vuex'
import {Tag, Card, Page, Modal, Spin, Row, Col, ButtonGroup, Button,  Breadcrumb, BreadcrumbItem, Icon, Form, FormItem, Input, Select, Option, DatePicker, InputNumber } from 'iview';
export default { 
	name:'cms-comment-edit',
	components: {Tag, Card, Page, Modal, Spin, Row, Col, ButtonGroup, Button, Breadcrumb, BreadcrumbItem, Icon, Form, FormItem, Input, Select, Option, DatePicker, InputNumber},
	data () {
		return {
			title:'编辑',
			tabIndex:'name1',
			showPictureBox:false,
			spinShow:true,
			currentImag:'',
			currentImagvisible:false,
			editorIndex:0,
			editorOption:{
				placeholder:'请输入内容',
				modules:{
					imageResize: {},
					toolbar:{
                        container: [
							['bold', 'italic', 'underline', 'strike'],        // toggled buttons
							['blockquote', 'code-block'],           // custom button values
							[{ 'list': 'ordered'}, { 'list': 'bullet' }],
							[{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
							[{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
							['link'],
							[{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
							[{ 'header': [1, 2, 3, 4, 5, 6, false] }],

							[{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
							[{ 'font': fonts }],
							[{ 'align': [] }],
							['clean'], 
                        ],
                    },
					syntax: {highlight:text => hljs.highlightAuto(text).value},


				}
			},
			vform:{
			},
			
			statusList: [ '暂存', '已审核','重新审核'],
			
		}
	},
	methods:{
		init:function(){
			let self=this
			self.$store.dispatch("setSpinShow",true)

			function action1(){return self.$http.get("/v1/cms/comments/"+self.$route.params.id,{params: { 'token': self.token }})}
			
			self.$http.all([action1()])
			.then(self.$http.spread(function (response1){
				if(200==response1.data.status && 0==response1.data.code)
				{
					response1.data.data.like=parseInt(response1.data.data.like)
					response1.data.data.like_base=parseInt(response1.data.data.like_base)
					response1.data.data.unlike=parseInt(response1.data.data.unlike)
					response1.data.data.reply=parseInt(response1.data.data.reply)
					response1.data.data.sequence=parseInt(response1.data.data.sequence)
					self.vform=response1.data.data
				}else{self.$Message.error(response1.data.message)}
				
				self.$store.dispatch("setSpinShow",false)
			})).catch(self.$http.spread(function (error1) {
				self.$store.dispatch("setSpinShow",false)
			}))
		},
		
		changeStatus:function(uid,statusId){
			let self=this
			self.$store.dispatch("setSpinShow",true)
			self.$http.post("/v1/cms/comments?_method=put&token="+self.token,{'id':uid,'data':'{"status":"'+parseInt(statusId)+'"}'})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					if(3==statusId){self.$router.push('/cms/comment/index')}
					else{self.vform.status=statusId}
					self.$Message.success('操作成功');
				}else{
					self.$Message.error(response.data.message);
				}
				self.$store.dispatch("setSpinShow",false)
			}).catch(function(error){
				self.$Message.error( error.message);
				self.$store.dispatch("setSpinShow",false)
			})
		},
		deleteComment:function(uid,statusId){
			this.$Modal.confirm({
				title: '温馨提示',
				content: '删除后不可恢复，确认删除？',
				onOk: () => {
					this.changeStatus(uid,statusId)
				},
			})
		},
		save:function(){
			let self=this
			self.$store.dispatch("setSpinShow",true)
			self.$http.post("/v1/cms/comments?_method=put&token="+self.token,{'id':self.$route.params.id,'data':JSON.stringify(self.vform)})
			.then(function(response){
				if(200==response.data.status && 0==response.data.code)
				{
					self.$Message.success('操作成功');
				}else{
					
					self.$Message.error(response.data.message);
				}
				self.$store.dispatch("setSpinShow",false)
			}).catch(function(error){
				self.$Message.error(error.message);
				self.$store.dispatch("setSpinShow",false)
			})
		},
		getStatusColor(status){
			if(2==status){return 'default'}
			else if(1==status){return 'success'}
			return 'default'
		}
	},
	created:function(){
	},
	mounted () {
    	this.setTitle(this.title)
	},
	activated:function(){
		this.init()
	},
	computed:{
		...mapGetters(['token','menuData'])
		
	},
}



</script>
<style lang="less" scoped>


</style>